<template>
  <baidu-map class="bm-view map" :center="centerPoint" :zoom="10" :scroll-wheel-zoom="true">
    <!-- 标记点 -->
    <div v-for="(item, index) in list" :key="index">
      <bm-marker
        :position="{ lng: item.lng, lat: item.lat }"
        :dragging="false"
       
        @click="isShow(item)"
      >
        <bm-info-window
          :position="{ lng: item.lng , lat: item.lat }"
          :show="item.showFlag"
          @close="infoWindowClose"
          @open="infoWindowOpen"
          v-if="flag"
        >
          <div>
            <div class="flexStart" style="width:290px;margin-bottom:20px;margin-top:5px;">
              <div class="left" style="position:relative;margin-right:12px">
                <img :src="item.img_content" alt width="120" height="88" />
                <div style="position:absolute;left:0;top:0">
                  <img :src="item.img_logo" alt width="44" height="42" />
                </div>
              </div>
              <div class="right flexDirectionCenter">
                <div style="width:154px">{{item.detail}}</div>
                <div class="newAdd" v-if="item.flag=='新建'">{{item.flag}}</div>
                <div class="newAdd2" v-if="item.flag=='局监管'">{{item.flag}}</div>
                <div class="newAdd3" v-if="item.flag=='局直管'">{{item.flag}}</div>
                <div class="addNum"></div>
              </div>
            </div>
            <div style="width:100%">
              <a-button type="primary" style="width:100%" @click="toDetail(item)">点击查看</a-button>
            </div>
          </div>
        </bm-info-window>
      </bm-marker>
    </div>
  </baidu-map>
</template>
<script>
import { BmlCurveLine } from 'vue-baidu-map'
// import img_content1 from "../../../assets/projectDetail.jpg";
import img_logo1 from '../../../../assets/homeImg/jujianguan.png'
import jiangyin from '../../../../assets/homeImg/jiangyin.jpg'
import img_logo2 from '../../../../assets/homeImg/zaijian.png'
import longtan from '../../../../assets/homeImg/longtan.jpg'
import img_logo3 from '../../../../assets/homeImg/juzhiguan.png'
import xinyi from '../../../../assets/homeImg/xinyi.jpg'
import nanbu from '../../../../assets/projectDetail.jpg'
import changtai from '../../../../assets/homeImg/changtai.jpg'
import chuzhou from '../../../../assets/homeImg/chuzhou.jpg'
import wufengshan from '../../../../assets/homeImg/wutaifeng.png'
import { queryAll } from '@/api/gateway'
export default {
  components: {
    BmlCurveLine
  },
  props: ['list'],
  data() {
    return {
      positionData: [
        // {
        //   lat: 34.424034,
        //   lng: 118.395956,
        //   showFlag: false,
        //   img_content: chuzhou,
        //   img_logo: img_logo3,
        //   flag: '新建',
        //   title: '京沪淮江段扩建工程',
        //   detail: '京沪高速公路淮安至江都段工程',
        //   price: '199.1亿元/152.7公里/3.5年'
        // },
        // {
        //   lat: 34.420341,
        //   lng: 118.40228,
        //   showFlag: false,
        //   img_content: nanbu,
        //   img_logo: img_logo3,
        //   flag: '新建',
        //   title: '南部通道',
        //   detail: '苏锡高速公路常州至无锡段工程',
        //   price: '159.1亿元/43.9公里/4年'
        // },
        // {
        //   lat: 34.415279,
        //   lng: 118.410904,
        //   showFlag: false,
        //   img_content: longtan,
        //   img_logo: img_logo3,
        //   flag: '新建',
        //   title: '龙潭长江大桥',
        //   detail: '龙潭过江通道工程',
        //   price: '62.54亿元/4.925公里/5年'
        // },
        // {
        //   lat: 34.411705,
        //   lng: 118.416438,
        //   showFlag: false,
        //   img_content: changtai,
        //   img_logo: img_logo3,
        //   flag: '新建',
        //   title: '常泰长江大桥',
        //   detail: '常泰过江通道',
        //   price: '158.61亿元/130.7公里/5.5年'
        // },
        // {
        //   lat: 34.294223,
        //   lng: 118.626282,
        //   showFlag: false,
        //   img_content: jiangyin,
        //   img_logo: img_logo3,
        //   flag: '新建',
        //   title: '江阴靖江长江隧道',
        //   detail: '江阴靖江长江隧道',
        //   price: '89.1亿元/5.6公里/3年'
        // },
        // {
        //   lat: 33.93653,
        //   lng: 118.944965,
        //   showFlag: false,
        //   img_content: wufengshan,
        //   img_logo: img_logo3,
        //   flag: '新建',
        //   title: '五峰山过江通道',
        //   detail: '五峰山过江通道公路接线工程',
        //   price: '93.58亿元/33.04公里/3年'
        // }
      ],
      points: [
        // { lat: 34.424034, lng: 118.395956, showFlag: false },
        // { lat: 34.424035, lng: 118.395957, showFlag: false },
        // { lat: 34.424036, lng: 118.395958, showFlag: false },
        // { lat: 34.420341, lng: 118.40228, showFlag: false },
        // { lat: 34.415279, lng: 118.410904, showFlag: false },
        // { lat: 34.411705, lng: 118.416438, showFlag: false },
        // { lat: 34.40551, lng: 118.424558, showFlag: false },
        // { lat: 34.294223, lng: 118.626282, showFlag: false },
        // { lat: 34.294221, lng: 118.6271, showFlag: false },
        // { lat: 34.294219, lng: 118.628, showFlag: false },
        // { lat: 34.294217, lng: 118.629, showFlag: false },
        // { lat: 33.93653, lng: 118.944965, showFlag: false },
        // { lat: 33.93652, lng: 118.945965, showFlag: false },
        // { lat: 33.93651, lng: 118.946963, showFlag: false },
        // { lat: 33.800187, lng: 119.053395, showFlag: false },
        // { lat: 33.703233, lng: 119.133559, showFlag: false }
      ],
      // centerLat:'',
      // centerLng:'',
      centerPoint: { lat: '34.424034', lng: '118.395956' },
      flagCenter: true,
      flag: false,
      oldIndex: 0
    }
  },
  mounted() {
    // this.enableScrollWheelZoom()
    // queryAll({}).then((res) => {
    //   let data = res.data.data
    //   data.forEach((item) => {
    //     item.showFlag = false
    //     switch (item.context) {
    //       case 'jscc':
    //         item.lat = 34.424034
    //         item.lng = 118.395956
    //         break
    //       case 'hsygs':
    //         item.lat = 34.411705
    //         item.lng = 118.416438
    //         break
    //       default:
    //         break
    //     }
    //   })
    // this.points=data
    // })
    // console.log(this.points);
  },
  methods: {
    infoWindowClose(item) {
      item.showFlag = false
    },
    infoWindowOpen(flag) {},
    randomNum(x, y) {
      let newIndex = Math.floor(Math.random() * y + x)

      if (newIndex === this.oldIndex) {
        return this.randomNum(x, y)
      } else {
        this.oldIndex = newIndex
        return newIndex
      }
    },
    isShow(flag) {
      // console.log(1111);
      // console.log();

      this.flag = false
      this.flagCenter = false
      // this.centerPoint.lat = 1
      // this.centerPoint.lng = 2
      this.centerPoint.lat = flag.lat
      this.centerPoint.lng = flag.lng
      // console.log(this.centerPoint.lat);

      this.centerPoint.lat = this.centerPoint.lat - 0 + 0.00000000001 * this.randomNum(1, 10)
      // console.log(this.centerPoint.lat);
      this.centerPoint.lng = this.centerPoint.lng - 0 + 0.0000000001 * this.randomNum(1, 10)
      // setTimeout(() => {
      //   // this.flag = true
      //   this.flagCenter = true
      // }, 20)
      // console.log(this.centerPoint);
      this.list.forEach((item, index) => {
        if (flag.lat != item.lat) {
          item.showFlag = false
        } else {
          item.showFlag = true
        }
      })
      setTimeout(() => {
        this.flag = true
        // this.flagCenter = true
      }, 20)
    },
    update(e) {
      this.points = e.target.cornerPoints
    },
    toDetail(data) {
      this.$router.push({
        path: '/projectDetails',
        query: { data: data }
      })
      sessionStorage.setItem('projectId',data.id)
      let t=true
      sessionStorage.setItem('homeFlag', t)
      sessionStorage.setItem('imgdata', JSON.stringify(data))
    }
  }
}
</script>
<style scoped>
.bm-view,
.map {
  width: 1200px;
  height: 600px;
}
.left {
  width: 120px;
  height: 88px;
  margin-right: 12px;
}
.right {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  /* line-height: 24px; */
}
.newAdd,
.newAdd2,
.newAdd3 {
  background: #51b342;
  border-radius: 2px;
  font-size: 12px;
  line-height: 18px;
  width: 45px;
  height: 18px;
  text-align: center;
  color: #fff;
}
p {
  margin-bottom: 0px;
}
.newAdd2 {
  background: #ff8a00;
}
.newAdd3 {
  background: #074dec;
}
.addNum {
  font-size: 14px;
  color: #999999;
  /* line-height: 48px; */
}
/* .BMap_vectex_nodeT{
  background-image: none;
}
.BMap_vectex_node{
  background-image: none;
} */
::v-deep path {
  stroke: red;
}
::v-deep .anchorBL {
  display: none;
}
</style>
